<template>
    <section>
        <!--工具条-->

        <div class="section-content clearfix">
            <el-col :span="24" style="padding-bottom: 0px;">
                <el-form :inline="true" :model="filters">
                    <h1 style="font-size:24px;font-weight:bold;margin-bottom: 10px;word-wrap:break-word;">标题：{{row.title}}
                    </h1>
                    <div style="margin-bottom: 10px" v-if="row.type!=3&&row.type!=4"> 内容：{{row.content}}</div>
                    <div v-if="row.type==3">
                    <div style="margin-bottom: 10px" class="grade"> 设备名称：{{row.content.model}}</div>
                    <div style="margin-bottom: 10px" class="grade"> 联系人：{{row.content.name}}</div>
                    <div style="margin-bottom: 10px" class="grade"> 联系电话：{{row.contacts}}</div>
                    <div style="margin-bottom: 10px" class="grade"> 故障车牌：{{row.content.plate}}</div>
                    <div style="margin-bottom: 10px" class="grade"> 网关SN：{{row.content.sn}}</div>
                    <div style="margin-bottom: 10px" class="grade"> 所属组织：{{row.content.company}}</div>
                    <div style="margin-bottom: 10px" class="grade"> 报修地点：{{row.content.address}}</div>
                    <div style="margin-bottom: 10px" class="grade"> 故障代码：{{row.content.code}}</div>
                    <div style="margin-bottom: 10px" class="grade"> 问题描述：{{row.content.content}}</div>
                    <div style="margin-bottom: 10px" class="grade"> 图片：<img :src="row.content.path" style="width:100%"></div>                 
                    <!-- <div style="margin-bottom: 10px">时间：{{row.createTime}}</div> -->
                    </div>
                    <div v-if="row.type==4">
                    <div style="margin-bottom: 10px"  class="grade">时间：{{row.createTime}}</div>
                    <div style="margin-bottom: 10px" class="grade"> 调试人员：{{row.content.name}}</div>
                    <div style="margin-bottom: 10px" class="grade"> 产品型号：{{row.content.model}}</div>
                    <!-- <div style="margin-bottom: 10px" class="grade"> 终端用户：{{row.content.terminal}}</div> -->
                    <div style="margin-bottom: 10px" class="grade"> 整机条码：{{row.content.bar}}</div>
                    <div style="margin-bottom: 10px" class="grade"> 网关SN：{{row.content.sn}}</div>
                    <div style="margin-bottom: 10px" class="grade"> 车架号：{{row.content.vin}}</div>
                    <div style="margin-bottom: 10px" class="grade"> 车牌号：{{row.content.plate}}</div>
                    <div style="margin-bottom: 10px" class="grade"> 制冷剂充注量：{{row.content.fluid}}</div>
                    <div style="margin-bottom: 10px" class="grade"> 整车电压：{{row.content.voltage}}</div>
                    <div style="margin-bottom: 10px" class="grade"> 降温时间：{{row.content.time}}</div>
                  

                    </div>
                    <div style="margin-bottom: 10px">时间：{{row.createTime}}</div>
                

                </el-form>
            </el-col>

            <!--列表-->
            <!-- <el-table :data="query" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column type="index" label="序号" width="80">
                </el-table-column>
            
                </el-table-column> 
                <el-table-column prop="body" label="内容">
                </el-table-column>
              
                <el-table-column prop="createTime" label="时间">

                </el-table-column>
              
            </el-table> -->

            <el-col :span="24" style="padding-bottom: 0px;">
                <div>
                    <div v-for="item in query" class="rowlist clearfix"> 
                        <div style="text-align: center"> {{item.createTime}} </div>
                        <div v-if="userid==item.fromId" style="text-align:right;">
                            {{item.fromName}} <img src="../../assets/1554284064.jpg">
                            <br/>
                          <div class="itembody" style="float: right"> 
                             <div style="text-align: left;">{{item.body.content}}</div> 
                             <div v-if="item.body.imageList&&item.body.imageList.length>0">
                                <el-image 
                                    v-for="(imglist,index) in item.body.imageList"
                                    style="width: 100px; height: 100px; margin:0 5px;"
                                    :src="imglist" 
                                    :key="index"
                                    :preview-src-list="item.body.imageList">
                                </el-image>
                             </div>
                             <div v-if="item.body.address">
                                地址：{{item.body.address}}
                             </div>
                          </div>
                        </div>
                        <div v-else>
                            <img src="../../assets/1554284055.jpg">{{item.fromName}}
                            <br/>
                          <div class="itembody">  
                            <div>{{item.body.content}}</div>  
                            <div v-if="item.body.imageList&&item.body.imageList.length>0">
                                <el-image 
                                    v-for="(imglist,index) in item.body.imageList"
                                    style="width: 100px; height: 100px; margin:0 5px;"
                                    :src="imglist" 
                                    :key="index"
                                    :preview-src-list="item.body.imageList">
                                </el-image>
                             </div>
                             <div v-if="item.body.address">
                                地址：{{item.body.address}}
                             </div>
                          </div>
                            <!-- <div style="margin-top:20px"> {{item.createTime}} </div> -->
                        </div>
                    </div>
                </div>
                
                <!-- <el-button type="primary" v-on:click="handleAdd" style="float:right">回复</el-button> -->
            </el-col>
            <!--工具条-->
            <el-input type="textarea" v-model="addForm.body" :rows="4" placeholder="请输入要回复的内容"></el-input>
            
            <el-button type="primary" @click.native="addSubmit" :loading="editLoading" style="margin-top:5px;float: right;">回复</el-button>
            <!-- <el-col :span="24" class="toolbar">
                <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
            
               
                <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="total"
                    style="float:right;">
                </el-pagination>
            </el-col> -->
            
          
        </div>
        <!--编辑界面-->
        <el-dialog title="内容" v-show="editFormVisible" v-model="editFormVisible" @close="editFormVisible=false">
            <div slot="footer" style="text-align: left; ">
                <el-form :model="editForm" label-width="100px" :rules="editFormRules" ref="editForm" style="min-height:200px">
                    <el-form-item label="反馈内容">

                        {{content}}
                    </el-form-item>

                    <el-form-item label="回复内容">
                        <el-input type="textarea" v-model="editForm.content"></el-input>

                    </el-form-item>

                </el-form>
                <div slot="footer" class="dialog-footer" style="text-align:right;">
                    <el-button @click.native="editFormVisible = false">取消</el-button>
                    <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
                </div>
            </div>
        </el-dialog>
        <el-dialog title="内容" v-show="addFormVisible" v-model="addFormVisible" @close="addFormVisible=false">
            <div slot="footer" style="text-align: left; ">
                <el-form :model="addForm" label-width="100px" :rules="addFormRules" ref="addForm">

                    <el-form-item label="回复内容">
                        <el-input type="textarea" v-model="addForm.body"></el-input>

                    </el-form-item>

                </el-form>
                <div slot="footer" class="dialog-footer" style="text-align:right;">
                    <el-button @click.native="addFormVisible = false">取消</el-button>
                    <el-button type="primary" @click.native="addSubmit" :loading="editLoading">提交</el-button>
                </div>
            </div>
        </el-dialog>
        <!--新增界面-->

    </section>
</template>

<script>
    // import util from './../common/js/util'
    //import NProgress from 'nprogress'
    import {
        suggest_query,
        suggest_readed,
        suggest_get,
        suggest_delete,
        suggest_put,
        suggest_reply,
        conversation_query,
        message_query,
        message_post,
        conversation_put
    } from '../../api/api';

    export default {
        data() {
            return {
                userid: JSON.parse(sessionStorage.getItem('user')).userId,
                content: '',
                disableditem: false,
                fileitem: [],
                fileList: {
                    softCode: '',
                    version: '',
                    name: '',
                    dir: '',
                    token: JSON.parse(localStorage.getItem('key'))
                },

                filters: {
                    name: '',
                    type: ''
                },
                file: '',
                query: [],
                total: 0,
                page: 1,
                listLoading: false,
                sels: [], //列表选中列
                editFormVisible: false, //编辑界面是否显示
                editLoading: false,
                editFormRules: {
                    name: [{
                        required: true,
                        message: '请输入姓名',
                        trigger: 'blur'
                    },{ min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }]
                },
                //编辑界面数据
                editForm: {
                    id: '',

                },

                addFormVisible: false, //新增界面是否显示
                addLoading: false,
                addFormRules: {
                    name: [{
                        required: true,
                        message: '请输入姓名',
                        trigger: 'blur'
                    },{ min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }],

                },
                //新增界面数据
                addForm: {
                    body: ''
                },
                row: JSON.parse(sessionStorage.getItem('suggest_details'))

            }
        },
        methods: {
            formatstatus(row, column) {

                return row.status == 3 ? '已回复' : row.status == 2 ? '已读' : row.status == 1 ? '未读' : '未知';
            },
            formatstate(row, column) {

                return row.contactType == 1 ? '电话' : row.contactType == 2 ? 'QQ' : row.contactType == 3 ? '微信' : row.contactType ==
                    4 ? '邮箱' : '未知';
            },
            formattype(row, column) {

               // return row.type == 1 ? '咨询 ' : row.type == 2 ? '建议' : row.type == 3 ? 'BUG' : row.type == 4 ? '其他' :'其他';
               return row.typeName;
            },
            serverscade() {
                if (this.addForm.serverType == 0) {
                    this.fileList.dir = "http/SoftWave"
                } else {

                    this.fileList.dir = "ftp/SoftWave"
                }
            },
            details: function (index, row) {
                sessionStorage.setItem('communicate_details', row.id)
                this.$router.push({
                    path: '/devices/communicate/details'
                })
            },
            stateput(s) {
                if (s.state == 1) {
                    s.state = 2;
                } else {
                    s.state = 1;
                }
                let para = Object.assign({}, s);

                device_upgrade_put(para).then((res) => {

                     this.begCode(res.code,res.message);
                    if (res.code == 0) {
                        this.editLoading = false;
                        //NProgress.done();
                        this.$message({
                            message: '状态修改成功',
                            type: 'success'
                        });
                        this.$refs['editForm'].resetFields();
                        this.editFormVisible = false;
                        this.getUsers();
                    } else {
                        this.$message({
                            message: res.message,
                            type: 'warning'
                        });
                    }
                });
            },
            //性别显示转换
            handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 1 个文件`);
            },
            handleAvatarSuccess(res, file) {
                console.log(file.type);

                this.begCode(res.code, res.message);
                if (res.code != 0) {
                    this.fileitem = [];
                }
                this.addForm.path = res.data.path;
                this.addForm.ftpPath = res.data.ftpPath;
                this.disableditem = true;
            },

            handleChange(file, fileList) {},
            formatSex: function (row, column) {
                return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
            },
            handleCurrentChange(val) {
                this.page = val;
                this.getUsers();
            },
            //获取菜单列表
            getUsers() {
                let para = {
                    conversationId: this.row.conversationId,
                    pageNo: this.page,
                    pageSize: 999,
                    // name: this.filters.name,
                    // type: this.filters.type,
                };
                this.listLoading = true;
                //NProgress.start();
                message_query(para).then((res) => {

                     this.begCode(res.code,res.message);
                    this.total = res.data.totalCount;
                    
                    this.query = [];
                    for(let i in res.data.list){
                        this.query.unshift(res.data.list[i])
                    }
                    for(let i in this.query){
                        this.query[i].body = JSON.parse(this.query[i].body)
                    }
                    console.log(this.query)
                    this.listLoading = false;
                    //NProgress.done();
                });
            },
            //删除
            handleDel: function (index, row) {
                this.$confirm('确认删除吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    //NProgress.start();
                    let para = {
                        idList: [row.id]
                    };
                    suggest_delete(para).then((res) => {

                         this.begCode(res.code,res.message);
                        if (res.code == 0) {

                            this.listLoading = false;
                            //NProgress.done();
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            this.getUsers();

                        } else {
                            this.$message({
                                message: res.message,
                                type: 'warning'
                            });
                        }
                    });
                }).catch(() => {

                });
            },
            //显示编辑界面
            handleEdit: function (index, row) {
                // this.editFormVisible = true;
                // let para = {
                //     id: row.id
                // }
                // this.editForm={
                //     id: row.id,
                //     content:''
                // }
                // suggest_readed(para).then((res) => {

                //      this.begCode(res.code,res.message);
                //     if (res.code == 0) {

                //         this.getUsers();
                //     } 
                // });
                // this.content =row.content;

            },
            //显示新增界面
            handleAdd: function () {

                this.disableditem = false;
                this.addFormVisible = true;
                this.fileitem = [];
                this.fileList = {
                    softCode: '',
                    version: '',
                    name: '',
                    dir: 'http/SoftWave',
                    token: JSON.parse(localStorage.getItem('key'))
                };
                this.addForm = {
                    body: '',
                    conversationId: this.row.conversationId,
                    type: '0'
                };
            },
            //编辑
            editSubmit: function () {
                this.fileitem = [];
                this.fileList = {
                    softCode: '',
                    version: '',
                    name: '',
                    dir: 'http/SoftWave',
                    token: JSON.parse(localStorage.getItem('key'))
                };
                this.addForm = {
                    body: '',
                    conversationId: this.row.conversationId,
                    type: '0'
                };
                this.$refs.editForm.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.editLoading = true;
                            //NProgress.start();
                            let para = Object.assign({}, this.editForm);

                            suggest_reply(para).then((res) => {

                                 this.begCode(res.code,res.message);
                                if (res.code == 0) {
                                    this.editLoading = false;
                                    //NProgress.done();
                                    this.$message({
                                        message: '回复成功',
                                        type: 'success'
                                    });
                                    this.$refs['editForm'].resetFields();
                                    this.editFormVisible = false;
                                    this.getUsers();
                                } else {
                                    this.$message({
                                        message: res.message,
                                        type: 'warning'
                                    });
                                }
                            });
                        });
                    }
                });
            },
            //新增
            addSubmit: function () {
                this.fileitem = [];
                this.fileList = {
                    softCode: '',
                    version: '',
                    name: '',
                    dir: 'http/SoftWave',
                    token: JSON.parse(localStorage.getItem('key'))
                };
            
                this.$refs.addForm.validate((valid) => {
                    if (valid) {
                        // this.addForm.conversationId=this.row.conversationId
                        // this.addForm.type=0;
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            console.log(this.addForm)
                            // this.addLoading = true;
                            //NProgress.start();
                            // let para = Object.assign({}, this.addForm);
                            let bodyStr = JSON.stringify({content: this.addForm.body})
                            let para = {
                                conversationId: this.row.conversationId,
                                body: bodyStr,
                                type: 0
                            }
                            message_post(para).then((res) => {

                                 this.begCode(res.code,res.message);
                                this.addLoading = false;
                                //NProgress.done();
                                if (res.code == 0) {


                                    this.$message({
                                        message: '提交成功',
                                        type: 'success'
                                    });
                                    this.addForm = {
                                    body: '',
                                    conversationId: this.row.conversationId,
                                    type: '0'
                                };
                                    console.log(this.userid)
                                    console.log(this.row.createUserId)
                                    if(this.userid!=this.row.createUserId){
                                        let num=this.row;
                                        num.state=1;
                                        conversation_put(num).then((res)=>{

                                        })
                                    }
                                    this.$refs['addForm'].resetFields();
                                    this.addFormVisible = false;
                                    this.getUsers();
                                }
                            });
                        });
                    }
                });
            },
            selsChange: function (sels) {
                this.sels = sels;
            },
            //批量删除
            batchRemove: function () {
                var ids = this.sels.map(item => item.id).toString();
                this.$confirm('确认删除选中记录吗？', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    //NProgress.start();
                    let para = {
                        idList: ids.split(',')
                    };
                    suggest_delete(para).then((res) => {
                         this.begCode(res.code,res.message);
                        this.listLoading = false;
                        //NProgress.done();
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        this.getUsers();
                    });
                }).catch(() => {

                });
            }
        },
        mounted() {
            console.log(JSON.parse(sessionStorage.getItem('suggest_details')))
            this.row = JSON.parse(sessionStorage.getItem('suggest_details'));
            if(this.row.type==3||this.row.type==4){
                this.row.content=JSON.parse(this.row.content);
            }
            console.log(this.row)
            this.getUsers();
        }
    }
</script>

<style scoped>
    .rowlist {
        margin-bottom: 10px;
        /* border: 1px solid #999; */
        background: #F7F7F7;
        padding: 10px;
    }
    .rowlist img{
        width: 32px;
        vertical-align: middle;
        /* margin: 5px; */
    }
    .itembody{
        /* display: inline-block; */
        border: 1px solid #333;
        border-radius: 6px;
        padding: 3px 5px;
        margin-top: 2px;
        float:left;
        width:auto;
        word-break: break-all;word-wrap: break-word;
    }
</style>